<template>
  <div id="top">
    <div class="menu1">
      <div class="One">
        <h2 class="oh1">登录界面</h2>
      </div>
      <div class="Two">
        <el-form
          :model="ruleForm"
          status-icon
          :rules="rules"
          ref="ruleForm"
          label-width="16vw"
          class="demo-ruleForm"
        >
          <el-form-item label="用户名称 :" prop="userphone">
            <i class="el-icon-user-solid i"></i>
            <el-input
              placeholder="请输入您的手机号"
              v-model="ruleForm.userphone"
              autocomplete="off"
              @keydown.native="keydown($event)"
            ></el-input>
          </el-form-item>
          <!-- <el-form-item label="确认密码" prop="checkPass">
            <el-input
              type="password"
              v-model="ruleForm.checkPass"
              autocomplete="off"
            ></el-input>
          </el-form-item> -->
          <el-form-item label="账号密码 :" prop="password">
            <i class="el-icon-unlock i"></i>
            <el-input
              placeholder="请输入您的密码"
              @keydown.native="keydown($event)"
              v-model.number="ruleForm.password"
              type="password"
            ></el-input>
          </el-form-item>
          <el-form-item>
            <el-button
              style="display: block"
              class="bt1"
              type="primary"
              @click="submitForm('ruleForm')"
              >登录</el-button
            >
            <div class="box1" v-show="!show">
              <section @click="$router.push('/message')">
                <i class="el-icon-phone"></i><span>验证登录</span>
              </section>
              <section @click="$router.push('/home')">
                <i class="el-icon-s-custom"></i><span>游客登录</span>
              </section>
              <section @click="$router.push('/register1')">
                <i class="el-icon-plus"></i><span>用户注册</span>
              </section>
            </div>
            <p :class="show ? 'nba' : 'bt2'" @click="show = !show">更多方式</p>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <!-- <el-button @click="$store.dispatch('logOut')">退出登录</el-button> -->
    <!-- <el-button class="back" @click="$router.push('/home')">跳转主页</el-button> -->
  </div>
</template>

<script>
export default {
  data() {
    let re = /^[1][3,4,5,7,8][0-9]{9}$/;
    var checkUsername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("手机号不能为空"));
      } else if (re.test(value)) {
        callback();
      } else {
        return callback(new Error("请输入正确的手机号"));
      }
    };
    // 校验密码：只能输入6-20个字母、数字、下划线
    let re2 = /^(\w){6,20}$/;
    var validatePass = (rule, value, callback) => {
      if (value === "") {
        callback(new Error("密码不能为空"));
      } else if (re2.test(value)) {
        callback();
      } else {
        callback(new Error("请输入正确的密码"));
      }
    };
    return {
      msg: "",
      ruleForm: {
        userphone: "",
        password: "",
      },
      rules: {
        userphone: [{ validator: checkUsername, trigger: "blur" }],
        password: [{ validator: validatePass, trigger: "blur" }],
      },
      drawer: false,
      show: true,
    };
  },
  methods: {
    change() {
      // console.log(this.$store.state.token, "token");
      // console.log(this.$store.state.id, "id");
      // console.log(this.$store.state.userImg, "img");
      // console.log(this.$store.state.userphone, "userphone");
    },
    keydown(e) {
      if (e.keyCode == 32) {
        e.returnValue = false;
      }
    },

    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$store.dispatch("login", this.ruleForm);
          this.ruleForm = {};
        } else {
          let re3 = /^[1][3,4,5,7,8][0-9]{9}$/;
          let re4 = /^(\w){6,20}$/;
          if (this.ruleForm.userphone === "") {
            this.$message({
              message: "请输入手机号",
              type: "error",
            });
          } else if (!re3.test(this.ruleForm.userphone)) {
            this.$message({
              message: "手机号输入错误",
              type: "error",
            });
          } else if (this.ruleForm.password === "") {
            this.$message({
              message: "请输入密码",
              type: "error",
            });
          } else if (!re4.test(this.ruleForm.password)) {
            this.$message({
              message: "密码输入错误",
              type: "error",
            });
          }
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //  第二个
    handleClose(done) {
      this.$confirm("确认关闭？")
        .then((_) => {
          done();
        })
        .catch((_) => {});
    },
  },
};
</script>
<style scoped>
.el-icon-phone {
  color: cyan;
}
.el-icon-s-custom {
  color: rgb(0, 0, 0);
}
.el-icon-plus {
  color: orange;
}
@keyframes ff {
  0% {
    opacity: 0;
    left: -10vw;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}
#top>>>.el-button>span {
  font-size: 30px;
}
#top .nba{
  font-size: 30px;
}
#top .bt2{
  font-size: 30px;
}
#top .box1{
  font-size: 30px;
}
.box1 {
  animation: ff 0.5s forwards;
  position: absolute;
  top: 8vh;
  background: rgba(0, 0, 0, 0.3);
  color: #fff;
  border-radius: 10px;
  width: 45vw;
  justify-content: space-around;
  display: flex;
  /* border: 1px solid red; */
}
.box1 > section > i {
  display: block;
  font-size: 60px;
  text-align: center;
}
.bt2 {
  width: 18vw;
  text-align: center;
  padding: 1vh 3vw;
  border-radius: 13px;
  background: rgba(83, 83, 83, 0.4);
  border: 0.1vw solid #fff;
  bottom: -8vh;
  font-size: 30px;
  left: 46vw;
  position: absolute;
  color: rgb(0, 243, 231);
}
.nba {
  width: 18vw;
  text-align: center;
  padding: 1vh 3vw;
  border-radius: 13px;
  background: rgba(0, 0, 0, 0.4);
  border: 0.1vw solid #fff;
  bottom: -8vh;
  font-size: 30px;
  left: 46vw;
  position: absolute;
  color: rgb(180, 255, 170);
}
.footer {
  position: absolute;
  top: 0;
  left: 0;
}
.back {
  position: absolute;
  left: 0;
  bottom: 0;
}
#top {
  width: 100vw;
  height: 100vh;
  background: url("../../../assets/6.jpg");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  font-size: 30px;
  overflow: hidden;
}
.top2 {
  width: 100vw;
  font-size: 30px;
  height: 100vh;
  background: url("../../../assets/3.jpg");
  background-repeat: no-repeat;
  background-size: 100vw 100vh;
  overflow: hidden;
}
.oh1 {
  letter-spacing: 2vw;
  margin: 30vh 0 5vh 0;
  text-align: center;
  font-size: 40px;
  color: #8effb5;
}
#top >>> .el-message__icon {
  font-size: 30px;
}
#top >>> .el-form-item--feedback {
  font-size: 30px;
  animation: none;
}
#top >>> .el-form-item {
  /* left:1vw; */
  font-size: 30px;
  position: relative;
}
#top >>> .i {
  position: absolute;
  left: 2vw;
  z-index: 1000;
  top: 1.2vh;
  font-size: 40px;
}
#top >>> .el-form-item__label {
  position: absolute;
  left: 22vw;
  font-size: 30px;
  top: 1.2vh;
  z-index: 100;
  font-size: 30px;
  margin-right: 1vw;
}
#top >>> .el-input {
  margin-bottom: 3vh;
  font-size: 30px;
  border-radius: 20px;
  width: 70vw;
}
#top >>> .el-input__inner {
  text-indent: 22vw;
  font-size: 30px;
  border-radius: 50px;
  height: 5vh;
  line-height: 5vh;
}
#top >>> .el-input__suffix {
  top: 1.4vh;
  right: 6vw;
  font-size: 30px;
}
#top >>> .el-form-item__error {
  top: 68%;
  color: rgb(255, 61, 61);
  left: 23vw;
  font-size: 30px;
}
@keyframes login {
  0% {
    color: rgb(148, 148, 148);
    width: 70vw;
  }
  50% {
    font-size: 36px;
    color: rgb(255, 233, 193);
    width: 90vw;
  }
  100% {
    color: rgb(88, 88, 88);
    width: 70vw;
  }
}
#top >>> .bt1 {
  width: 70vw;
  border-radius: 30px;
  height: 5vh;
  font-size: 30px;
  border-radius: 60px;
  border: none;
  background-image: linear-gradient(120deg, #84fab0 0%, #8fd3f4 100%);
}
/* ---------测试-------- */
/* #top >>> .el-message__content {
  width: 50vw;
  font-size: 50px !important ;
}
#top >>> .el-button--primary > span {
  animation: login 0.4s linear;
}

#top >>> .el-message .el-icon-success {
  font-size: 40px !important;
}

#top >>> .el-message--success .el-message__content {
  font-size: 40px;
  font-weight: 700;
}
#top >>> .el-message .el-icon-error {
  font-size: 40px !important;
}

#top >>> .el-message--error .el-message__content {
  font-size: 40px !important;
  font-weight: 700;
} */
/* .el-message .el-icon-success {
  font-size: 40px !important;
}
.el-message--success .el-message__content {
  font-size: 40px !important;
}
.el-message .el-icon-error {
  font-size: 40px !important;
}
.el-message--error .el-message__content {
  font-size: 40px !important;
} */
</style>


<style>
.el-message__content {
  font-size: 30px !important;
  font-weight: 600;
  vertical-align: middle;
}
</style>